<script setup lang="ts">
import { deleteArticleApi, getArticleListApi } from '@/apis/article'
import type { ArticleDetail, ArticleReqParams } from '@/types/article.d.ts'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

// 频道选项
// channelOptions: [],
// 请求参数对象
const reqParams = ref<ArticleReqParams>({
  status: null,
  channel_id: null,
  begin_pubdate: null,
  end_pubdate: null,
  // 分页信息
  page: 1,
  per_page: 5,
})
// 总条数
const total = ref(0)
// 日期范围
const dateArr = ref([])
// 文章列表
const articles = ref<ArticleDetail[]>([])
// 获取文章列表
const getArticleList = async () => {
  const res = await getArticleListApi(reqParams.value)
  articles.value = res.results
  total.value = res.total_count
}
getArticleList()
// 选择日期
const changeDate = (dateArr: string[]) => {
  // 当你清空的时候，dateArr 是 null , 选择日期后 dateArr = [起始时间，结束时间]
  if (dateArr) {
    reqParams.value.begin_pubdate = dateArr[0]
    reqParams.value.end_pubdate = dateArr[1]
  } else {
    reqParams.value.begin_pubdate = ''
    reqParams.value.end_pubdate = ''
  }
}
// 筛选文章
const filterArticle = () => {
  reqParams.value.page = 1
  // 在做筛选的时候从第一页开始
  // 获取文章前，收集筛选条件
  // 1. 状态，频道，是自动收集的
  // 2. 日期范围需要手动收集
  getArticleList()
}
// 删除
const deleteArticle = async (id: string) => {
  await deleteArticleApi(id)
  ElMessage.success('删除成功~')

  if (articles.value.length === 1 && reqParams.value.page > 1) {
    reqParams.value.page--
  }

  getArticleList()
}
// 切换分页
const changePager = (newPage: number) => {
  reqParams.value.page = newPage
  getArticleList()
}
</script>

<template>
  <div class="article-page">
    <!-- 筛选区域 -->
    <el-card>
      <template v-slot:header>
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>内容管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
      <!-- 表单 -->
      <el-form label-width="80px" style="width: 615px">
        <el-form-item label="状态：">
          <el-radio-group v-model="reqParams.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：" style="width: 40%">
          <!-- 1. :value="reqParams.channel_id" 传递频道ID给子组件 -->
          <!-- 2. @input="reqParams.channel_id=$event" 监听子组件触发的input事件，$event触发事件的传参 -->
          <!-- <my-channel :value="reqParams.channel_id" @input="reqParams.channel_id=$event"></my-channel> -->
          <!-- 3. 使用v-model进行双向数据绑定 -->
          <my-channel v-model="reqParams.channel_id"></my-channel>
        </el-form-item>
        <el-form-item label="日期：" style="width: 60%">
          <el-date-picker
            @change="changeDate"
            v-model="dateArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button @click="filterArticle()" type="primary">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 结果区域 -->
    <el-card style="margin-top: 20px">
      <template v-slot:header>
        <div>根据筛选条件共查询到 {{ total }} 条结果：</div>
      </template>
      <!-- 表格 -->
      <el-table :data="articles">
        <el-table-column label="封面">
          <template v-slot="scope">
            <el-image :src="scope.row.cover.images[0]" style="width: 180px; height: 120px">
              <template v-slot:error>
                <div>
                  <img src="../../assets/error.png" style="width: 180px; height: 120px" alt="" />
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" width="400px"></el-table-column>
        <el-table-column label="状态">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
            <el-tag v-if="scope.row.status === 1">待审核</el-tag>
            <el-tag v-if="scope.row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.status === 3" type="warning">审核失败</el-tag>
            <el-tag v-if="scope.row.status === 4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate"></el-table-column>
        <el-table-column label="阅读数" prop="read_count" width="120px"></el-table-column>
        <el-table-column label="评论数" prop="comment_count" width="120px"></el-table-column>
        <el-table-column label="点赞数" prop="like_count" width="120px"></el-table-column>
        <el-table-column label="操作" width="120px">
          <template v-slot="scope">
            <el-button
              @click="$router.push(`/publish?id=${scope.row.id}`)"
              type="primary"
              icon="edit"
              circle
              plain
            ></el-button>
            <el-popconfirm title="确定要删除吗?" @confirm="deleteArticle(scope.row.id)">
              <template #reference>
                <el-button type="danger" icon="delete" circle plain></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px"
        background
        layout="prev, pager, next"
        @current-change="changePager"
        :current-page="reqParams.page"
        :page-size="reqParams.per_page"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="less"></style>
